<template>
	<view class="invoiceInfo">
		<view class="main">
			<view class="item">
				<input class="uni-input"  @input='onChange' type="text"  v-model="name" placeholder='请填写快递公司名称' placeholder-style="color:#999999">
				
			</view>
			<view class="item">
			<input class="uni-input" @input='onChange' type="text"  v-model="number" placeholder='请填写快递单号' placeholder-style="color:#999999">
				
			</view>
			<view class="upload">
				<view class="tip">
					请上传发票凭证，需大于等于<text class="red">{{countMoney}}</text>元
				</view>
				  <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
                                <view class="close-view" @click="close(index)">
									<uni-icon class='icon' type="clear" size="20" color='red'></uni-icon>
								</view>
                            </view>
                        </block>
                        <view class="uni-uploader__input-box" v-show="imageList.length < 2">
                        	<view class="uni-uploader__input" @tap="chooseImg"></view>
                        </view>
                    </view>
                </view>
				
				
				<!-- <uni-icon type="upload" size="50" v-if="imageList.length<3"></uni-icon> -->
			</view>
			
			<view class="submit_btn" :class="{activeBj:changeBJ}" @click="submit">提交</view>
		</view>
		<view class="footer">
			<view>*发票需为增值税普票</view>
			<view>*抬头类型：<text class="red">{{invoiceType}}</text></view>
			<view>*发票抬头：<text class="red">{{invoiceCompany}}</text></view>
			<view>*税号：<text class="red">{{invoiceNo}}</text></view>
			<view>*收件人地址：{{invoiceExAddress}}</view>
			<view>*收件人电话：<text @tap="makePhoneCall">{{invoiceExTel}}</text></view>
			<view>*收件人邮编：{{invoiceExZipCode}}</view>
		</view>
		
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
	data() {
		return {
			countMoney: 0,
			name: '',
			number: '',
			invoiceType: '',
			invoiceCompany: '',
			invoiceNo: '',
			invoiceExAddress: '',
			invoiceExTel: '',
			invoiceExZipCode: '',
			flowsTring: '',
			imageList: [],
			uploadImgs: []
			// changeBJ: false
		};
	},
	computed: {
		changeBJ() {
			if (this.name && this.number && this.imageList.length > 0) {
				return true;
			} else {
				return false;
			}
		}
	},
	onLoad(e) {
		this.countMoney = +e.countMoney;
		this.flowsTring = e.flowsTring;
		this.globalRuleGet();
	},
	methods: {
		makePhoneCall: function() {
			uni.makePhoneCall({
				phoneNumber: this.invoiceExTel,
				success: () => {
					console.log('成功拨打电话');
				}
			});
		},
		globalRuleGet() {
			util.ajax(
				'globalRuleGet',
				{
					token: util.getUserToken()
				},
				data => {
					let json = data.data;
					if (json.status) {
						// console.log(json.data.rule.proportionOfReward2Money);

						this.invoiceType = json.data.rule.invoiceType;
						this.invoiceCompany = json.data.rule.invoiceCompany;
						this.invoiceNo = json.data.rule.invoiceNo;
						this.invoiceExAddress = json.data.rule.invoiceExAddress;
						this.invoiceExTel = json.data.rule.invoiceExTel;
						this.invoiceExZipCode = json.data.rule.invoiceExZipCode;
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},

		onChange() {
			if (this.name && this.number && this.imageList.length > 0) {
				this.changeBJ = true;
			} else {
				this.changeBJ = false;
			}
		},
		chooseImg() {
			//选择图片
			uni.chooseImage({
				sourceType: ['camera', 'album'],
				sizeType: 'compressed',
				count: 2 - this.imageList.length,
				success: res => {
					this.imageList = this.imageList.concat(res.tempFilePaths);
					// console.log(this.imageList)
					for (let i = 0; i < this.imageList.length; i++) {
						this.upload_file(res.tempFilePaths[i]);
					}
				}
			});
		},
		previewImage() {
			//预览图片
			uni.previewImage({
				urls: this.imageList
			});
		},
		upload_file(filePath) {
			uni.showLoading({
				title: '正在上传...'
			});
			uni.uploadFile({
				url: util.getDomain() + 'file.upload',
				filePath: filePath,
				// files: files,
				name: 'userfile',
				formData: {},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					// console.log(JSON.parse(res.data))
					uni.hideLoading();
					let upLoadImg = JSON.parse(res.data).data;
					this.uploadImgs.push(upLoadImg);
					console.log(this.uploadImgs)
					
				}
			});
		},
		close(e) {
			this.imageList.splice(e, 1);
			this.uploadImgs.splice(e, 1);
		},
		submit() {
			console.log(this.uploadImgs)
			if (!this.name) {
				uni.showToast({
					title: '请填写快递公司名称！',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			if (!this.number) {
				uni.showToast({
					title: '请填写快递单号！',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			
			if (this.uploadImgs.length === 0) {
				uni.showToast({
					title: '请上传发票凭证',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			uni.showLoading({
				title: '正在提交...'
			});
			
			util.ajax(
				'userRewardInvoice',
				{
					flows: this.flowsTring,
					expressName: this.name,
					expressNumber: this.number,
					certs: JSON.stringify(this.uploadImgs),
					token: util.getUserToken()
				},
				data => {
					uni.hideLoading();
					let json = data.data;
					if (json.status) {
						uni.reLaunch({
							url: './submitSuccess'
						})
						this.imageList = [];
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		}
	},
	components: {
		uniIcon
	}
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
/*通用 */
.invoiceInfo {
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 30upx;
	.main {
		padding: 0 30upx;
		background: white;
		flex-direction: column;
		.item {
			height: 100upx;
			border-bottom: 1upx solid #eeeeee;
			align-items: center;
			input {
				padding-left: 0;
			}
		}
		.upload {
			flex-direction: column;
			color: #999999;
			margin-top: 35upx;
			.tip {
				display: block;
				.red {
					color: #ff1268;
				}
			}

			.uni-icon {
				margin-top: 20upx;
			}
			.close-view {
				position: absolute;
				right: -12upx;
				top: -30upx;
			}
		}
		.submit_btn {
			background: #ff1268;
			color: white;
			font-size: 34upx;
			width: 100%;
			height: 100upx;
			justify-content: center;
			align-items: center;
			border-radius: 5upx;
			margin: 42upx auto 42upx;
			background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
			background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
			background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
			background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
			background: linear-gradient(to right, #fabde6, #ffa0c2);
		}
		.activeBj {
			background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
			background: -o-linear-gradient(to right, #ff48ac, #ff1268);
			background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
			background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
			background: linear-gradient(to right, #ff48ac, #ff1268);
			color: white;
		}
	}
	.footer {
		margin-top: 30upx;
		flex: 1;
		flex-direction: column;
		width: 100%;
		view {
			font-size: 26upx;
			line-height: 1.9;
			.red {
				color: #ff1268;
			}
		}
	}
}
</style>
